<template>
  <div>
    <div>
      <button type="button" @click="addShop">模拟新增商品</button>
      <button type="button" @click="editShop">模拟修改商品</button>
    </div>
    <ShopCar :shops ref="ShopCarRef" v-slot="{ shop }">
      <ShopItem2 :shop></ShopItem2>
    </ShopCar>
  </div>

</template>
<script setup lang="ts">
import { ref, useTemplateRef } from 'vue';
import ShopCar from './components/ShopCar.vue';
import { type IShopInfo } from '@/types/shop';
import ShopItem2 from './components/ShopItem2.vue';

// 模板引用
const ShopCarRef = useTemplateRef('ShopCarRef')

const shops = ref<IShopInfo[]>([
  {
    id: '1',
    name: 'Apple',
    count: 1,
    price: 100,
    picture:
      'https://ts2.cn.mm.bing.net/th?id=OIP-C.-Y9W58cVwHMaH021cnmzGgHaIY&w=234&h=266&c=8&rs=1&qlt=90&o=6&cb=13&dpr=1.6&pid=3.1&rm=2',
    stock: 10
  },
  {
    id: '2',
    name: 'Banana',
    count: 1,
    price: 50,
    picture:
      'https://ts2.cn.mm.bing.net/th?id=OIP-C.JIE9eUSxFmiw15Du2ZC-XAHaGJ&w=274&h=227&c=8&rs=1&qlt=90&o=6&cb=13&dpr=1.6&pid=3.1&rm=2',
    stock: 5
  },
  {
    id: '3',
    name: 'Orange',
    count: 1,
    price: 20000,
    picture:
      'https://ts2.cn.mm.bing.net/th?id=OIP-C.7DUeKG3rK4bwCv7Yei1--wHaGB&w=277&h=225&c=8&rs=1&qlt=90&o=6&cb=13&dpr=1.6&pid=3.1&rm=2',
    stock: 50
  }
])

const addShop = ()=>{
  ShopCarRef.value?.addShop({
    id: '4',
    name: 'Bread',
    count: 1,
    price: 100,
    picture:
      'https://ts3.cn.mm.bing.net/th?id=OIP-C.TZXl9sWf-mYfTBBt7kd-PQHaE8&w=306&h=204&c=8&rs=1&qlt=90&o=6&cb=13&dpr=1.6&pid=3.1&rm=2',
    stock: 10
  })
}

const editShop = ()=>{
  ShopCarRef.value?.editShop(0,'price',120)
}
</script>

<style lang="scss" scoped></style>
